<template>
	<view class="wo">
		<div class="two">
		  <div
		    class="li"
		    v-for="(item, index) in list"
		    :key="item.id"
		    @click="cheduleDetails(item)"
		  >
		    <div class="left">
		      <view class="border" :style="{ backgroundColor: item.color }"></view>
		      <view class="">
		        <text>11:00-12:00</text>
		        <text>{{ item.headline }}</text>
		      </view>
		    </div>
		    <div class="right">
		      <view v-if="list[index].state === '1'">
		        <image src="../../../static/diImage/时钟.png" mode=""></image>
		        <view>未开始</view>
		      </view>
		      <view v-else-if="list[index].state == '2'">
		        <image src="../../../static/diImage/圆.png" mode=""></image>
		        <view>进行中</view>
		      </view>
		      <view v-else-if="list[index].state == '3'">
		        <image src="../../../static/diImage/超时.png" mode=""></image>
		        <view>已超时</view>
		      </view>
		      <view v-else-if="list[index].state == '4'">
		        <image src="../../../static/diImage/差.png" mode=""></image>
		        <view>已取消</view>
		      </view>
		      <view v-else-if="list[index].state == '5'">
		        <image src="../../../static/diImage/对.png" mode=""></image>
		        <view>已完成</view>
		      </view>
		
		      <view v-else-if="list[index].state == '6'">
		        <image src="../../../static/diImage/正方形.png" mode=""></image>
		        <view>未完成</view>
		      </view>
		    </div>
		  </div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[]
			}
		},
		methods: {
			cheduleDetails(item){
				uni.navigateTo({
				  url:
				    "/pages/di/cheduleDetails/cheduleDetails?item=" +
				    JSON.stringify(item),
				});
			}
		},
		created() {
		  uni.request({
		    url: "http://127.0.0.1:3000/salesLead/getAll", //接口地址
		    method: "POST",
		    success: (res) => {
		      this.list = res.data.data;
		      console.log(this.list);
		    },
		  });
		},
	}
</script>

<style lang="scss">
	.wo{
		padding: 20rpx;
	}
.two {
    width: 100%;
    border-top: 1px solid gainsboro;
    padding: 10px 10px 10px 0;
	font-size: 24rpx;
    .li {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      background-color: #f9f7f7;
      justify-content: space-between;
      padding: 10px 10px 10px 0;
      margin-bottom: 10px;
      color: #6f6e6e;
      .left {
        display: flex;
        view {
          height: 50px;
          display: flex;
          justify-content: space-evenly;
          flex-direction: column;
        }
        .border {
          width: 5px;
          height: 50px;
          margin-right: 10px;
        }
      }
      .right {
        display: flex;
        height: 100%;
        // align-items: center;
        image {
          width: 20px;
          height: 20px;
          margin-right: 10px;
          line-height: 50px;
        }
        view {
          height: 100%;
          display: flex;
          align-items: center;
        }
      }
    }
  }
</style>
